前端资料

比如我们要把一句话追加到页面当中,"hello world"

但是如果我们的字符串里面也有双引号怎么办?

但是,既有双引号,又有单引号怎么办?这时候,我们可以考虑用转义斜杠

1.

2、如何创建对象

比如说,我们再创建一个学生的构造器:

这时候,我们发现,我们刚才创建的其实这里面好多代码和Person是重复的,所以,为了避免浪费,我们可以考虑使用继承,让Stduent构造器继承自Person类:

1.

3、继承

function Person(name,age){ this.name = name; this.age = age; } Person.prototype.eat = function(){ console.log('吃饭…'); } function Student(name,age,subject){ // this.name = name; // this.age = age; Person.apply(this,[name,age]); this.subject = subject; } Student.prototype = new Person(); var xw = new Student('小王',20); console.log(xw); xw.eat();

1.

4、ES6相关

startsWith

1.

5、函数默认值

如果用户正常传入数字,是没问题的,但是如果用户忘记传值了,比如:



那得到的结果就是NaN,所以,为了避免这个问题,我们可以考虑用默认值:

1.

6、npm复习

npm init 初始化npm仓库
npm init -y 初始化npm仓库(不需要交互式)
npm install –save jquery 本地安装jquery
npm install –save jquery@2.3.1 本地安装jquery(指定版本)
npm uninstall –save jquery 本地卸载jquery
npm install -g gulp-cli 全局安装gulp-cli
npm uninstall -g gulp-cli 全局卸载gulp-cli
npm docs jquery 查看jquery官方文档
npm info jquery –json 查看jquery目前为止有哪些版本
npm install -g npm 升级npm
npm install 根据package.json进行安装
npm i npm install的简写
npm root 包名-g 查看包安装的位置
npm doctor 可以检查你当前npm,node是否配置正常,很有用

1.

7、ajax与服务器

ajax的理解:在不刷新页面的情况下,浏览器悄悄地、异步地向服务器发出HTTP请求。服务器收到请求后,传回新的格式化数据回来(通常是JSON)。浏览器解析JSON,通过DOM将新数据呈递显示,页面仅局部刷新。

1.

8、异步的理解

通过一个例子来理解js执行代码的流程(不考虑预解析)

var a = 1;

console.log(a);

var xhr = new XMLHttpRequest();

xhr.open('GET','./a.json');

xhr.onreadystatechange = function(){

if(xhr.status === 200 && xhr.readyState === 4){

    console.log(xhr.responseText);

}

}

xhr.send(null);

setTimeout(function(){

console.log('定时器执行');

},200);

var b = 2;

console.log(b);

要想理解这个过程,必须要明白下面几个东西:1、js是单线程的,也就是一次只能执行一件事情

  • 单线程:一个车间,一次只能做一件事情

  • 多进程:有一堆的车间,可以给每个任务分配一个车间执行相应的任务

2、浏览器是多线程(进程)的,有的进程用来渲染css,有的进程用来渲染html,有的进程用来请求ajax,有的进程用来请求页面的图片、js、css等静态文件资源3、event loop用来管理我们的异步的代码的,它会把它们放在一个线程池当中

理解整个流程

1、浏览器加载当前的js文件,主js线程可以从上往下运行

2、执行var a = 1

3、执行console.log(a)

4、创建一个xhr对象,把这个对象的相关操作和onreadystatechange后面的回调函数放到事件循环event loop当中

把定时器和对应的回调函数放到我们的event loop当中

5、event loop会管理我们的异步的任务,当异步任务执行完了(如果是定时器则是定时器到期了)之后,把对应的回调函数放到一个叫回调函数队列当中

6、当主js线程中的代码全部执行完了之后,处于空闲状态,去回调函数队列当中去找有没有任务可以执行,如果有的话就取出来靠最前面的拿出来执行

如何理解event loop

可以把js主线程想像成是老板,event loop想像是秘书

1.

9、http协议相关

1.

10、路由的理解

保安大爷的小本本

1.

11、用php实现一个登录功能

(后面我们会用node.js来实现,所以大家先把这个例子用php代码写一下,理解下原理)

<!DOCTYPE html>

<html lang="en">

<head>

&lt;meta charset=&quot;UTF-8&quot;&gt;

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;

&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;

&lt;title&gt;Document&lt;/title&gt;

</head>

<body>

&lt;form action=&quot;login.php&quot; method=&quot;POST&quot;&gt;

    &lt;input type=&quot;text&quot; name=&quot;username&quot; placeholder=&quot;用户名&quot;&gt;

    &lt;br&gt;

    &lt;input type=&quot;text&quot; name=&quot;password&quot; placeholder=&quot;密码&quot;&gt;

    &lt;input type=&quot;submit&quot; value=&quot;登录&quot;&gt;

&lt;/form&gt;

</body>

</html>

<?php

header("Content-Type: text/plain; charset=utf-8");

$userInfo = array('name'=>'itcast','password'=>'123456');

if( ($_POST['username'] == $userInfo['name']) && ($_POST['password'] == $userInfo['password']) ){

echo &#39;登录成功&#39;;

}else{

echo &#39;登录失败&#39;;

}

1.

12、用php实现一个成绩查询的小案例

(后面我们会用node.js来实现,所以大家先把这个例子用php代码写一下,理解下原理)

{

&quot;no123&quot;:{

    &quot;chinese&quot;:&quot;100&quot;,

    &quot;math&quot;:&quot;140&quot;,

    &quot;english&quot;:&quot;149&quot;,

    &quot;summary&quot;:&quot;289&quot;

},

&quot;no124&quot;:{

    &quot;chinese&quot;:&quot;100&quot;,

    &quot;math&quot;:&quot;140&quot;,

    &quot;english&quot;:&quot;140&quot;,

    &quot;summary&quot;:&quot;289&quot;

},

&quot;no125&quot;:{

    &quot;chinese&quot;:&quot;100&quot;,

    &quot;math&quot;:&quot;140&quot;,

    &quot;english&quot;:&quot;139&quot;,

    &quot;summary&quot;:&quot;269&quot;

}

}

<!DOCTYPE html>

<html lang="en">

<head>

&lt;meta charset=&quot;UTF-8&quot;&gt;

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;

&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;

&lt;title&gt;Document&lt;/title&gt;

</head>

<body>

&lt;form action=&quot;search.php&quot; method=&quot;POST&quot;&gt;

    &lt;input type=&quot;text&quot; name=&quot;username&quot; placeholder=&quot;请输入学号&quot;&gt;

    &lt;input type=&quot;submit&quot; value=&quot;查询&quot;&gt;

&lt;/form&gt;

</body>

</html>

<?php

$data = array("no123"=>array("chinese"=>"100","math"=>"140","english"=>"149","summary"=>"289"),"no124"=>array("chinese"=>"100","math"=>"140","english"=>"149","summary"=>"289"),"no125"=>array("chinese"=>"99","math"=>"138","english"=>"149","summary"=>"289"));

$user = $_POST['username'];

foreach($data as $key=>$value){

if($key === $user){

    echo json\_encode($value);

    return;

}

}

1.

13、require.js复习

<!DOCTYPE html>

<html lang="en">

<head>

&lt;meta charset=&quot;UTF-8&quot;&gt;

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;

&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;

&lt;title&gt;Document&lt;/title&gt;

</head>

<body>

&lt;script src=&quot;./require.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;

    require([&#39;./index.js&#39;])//加载模块

&lt;/script&gt;

</body>

</html>

//index.js

define(['./a','./b'],function(a,b){

console.log(a);

console.log(b);

});

//a.js

define(function(){

return {

    name:&#39;a模块&#39;,

    fn:function(){

        console.log(222);

    }

}

});

define(function(){

return {

    name:&#39;b模块&#39;,

    fn:function(){

        console.log(444);

    }

}

});

关于模块化,虽然我们只学过require.js(其实angular.js当中也是学过的),我们一定要学会总结规律,所有的模块化库或者框架其实主要由以下几个部分组成的:

如何把模块引入到html文件当中

如何创建一个模块

当前模块如何导出(或者说暴露)出来属性和方法

1.

14、静态页面和动态页面

  • 所谓的静态页面就是写死了,不需要通过ajax去后台加载数据

  • 所谓的动态页面就是有部分数据是需要通过ajax从后台加载数据进行渲染的

  • 衍生:静态资源 –> js,css,html,jpg,png…

1.

15、静态资源服务器

我们在使用apache的时候会发现,如果我们把各种静态资源放进去就可以访问,apache是一个静态资源服务器,常见的静态资源服务器还有http-server等

1.

16、art-template的用法

<script id="test" type="text/html">

<h1>前端资料</h1>

<ul>

{{each list as value i}}

    &lt;li&gt;索引 {{i + 1}} :{{value}}&lt;/li&gt;

{{/each}}

</ul>

</script>

var data = {

title: &#39;标签&#39;,

list: [&#39;文艺&#39;, &#39;博客&#39;, &#39;摄影&#39;, &#39;电影&#39;, &#39;民谣&#39;, &#39;旅行&#39;, &#39;吉他&#39;]

};

var html = template('test', data);

document.getElementById('content').innerHTML = html;

简写方式

<script id="test" type="text/html">

<h1>前端资料</h1>

<ul>

{{each list}}

    &lt;li&gt;索引 {{$index + 1}} :{{$value}}&lt;/li&gt;

{{/each}}

</ul>

</script>

  1. 17、网站图标的问题

如果大家平时遇到了这个问题,可以直接忽略掉

  1. 18、网站的内容没有加载完,会是什么情况?

不停的转圈

1.

19、url的组成